<template>
  <div>
    <el-form
        :model="searchParams"
        size="small"
        label-width="80px"
        class="formInline"
    >
      <el-row>
        <el-col :span=10>
          <el-form-item label="所辖机构：">
<!--            <SelectTreeCom-->
<!--                v-model="flowSearchParams.jyjg"-->
<!--                :isAll="false"-->
<!--                :depStatus="depStatus"-->
<!--                ref="SelectTreeCom"-->
<!--            ></SelectTreeCom>-->
            <SelectTreeCom v-model="searchParams.sxjg" :isAll="false" :depStatus="depStatus"  ref="SelectTreeCom" style="width: 100%;"></SelectTreeCom>
          </el-form-item>
        </el-col>
        <el-col :span=7>
          <el-form-item label="发票状态：">
            <dict-select v-model="searchParams.fpzt" :dict-code="DictCode.VMS_FPZT" style="width: 100%"></dict-select>
          </el-form-item>
        </el-col>
        <el-col :span=7>
          <el-form-item label="发票类型：">
            <dict-select v-model="searchParams.fplx" :dict-code="DictCode.VMS_FPLX" style="width: 100%"></dict-select>
          </el-form-item>
        </el-col>

      </el-row>
            <el-row>
        <el-col :span=10>
          <el-form-item label="开票月份：">
            <el-date-picker
                v-model="searchParams.kpyf"
                type="month"
                format="yyyy-MM"
                value-format="yyyy-MM"
                placeholder="选择开票月份">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span=14>
          <div style="float: right">
            <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
            <el-button type="primary" @click="onResize" size="small">重置</el-button>
          </div>
        </el-col>
                    </el-row>
    </el-form>

    <tableList
        :loading="loading"
        border
        :heightMin="140"
        :keySet="keySet"
        :autoHeight="true"
        ref="multipleTable"
        :tableData="listDetails"
        :paginationShow="true"
        :pageNumber="pages.current"
        :pageSize="pages.size"
        :total="pages.total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:bhsje="{row}">
<!--        负数标红-->
        <span :style="{ color: row.bhsje < 0 ? 'red' : '' }">{{ row.bhsje }}</span>
      </template>
      <template v-slot:se="{row}">
        <!--        负数标红-->
        <span :style="{ color: row.se < 0 ? 'red' : '' }">{{ row.se }}</span>
      </template>
      <template v-slot:hsje="{row}">
        <!--        负数标红-->
        <span :style="{ color: row.hsje < 0 ? 'red' : '' }">{{ row.hsje }}</span>
      </template>
    </tableList>
  </div>
</template>

<script>

import {DictCode} from "@/utils/DictConstant";
import DictSelect from "@/views/invoiceTemplate/components/DictSelect/DictSelect.vue";
import tableList from "@/components/tableList/index.vue";
import mixinTable from '@/mixin/mtable.js'
import {getInvoiceInformationStatistics,getInvoiceInformationStatisticsTest} from "@/api/invoiceInformationStatistics";
import SelectTreeCom from "@/components/selectTree/selectTreeCom.vue";

export default {
  name: "invoiceInformationStatistics",
  components: {SelectTreeCom, tableList, DictSelect},
  methods: {
    onSubmit() {
      // 所辖机构不能为空
      if (!this.searchParams.sxjg) {
        this.$message.error('请选择所辖机构')
        return
      }
      // 开票月份不能为空
      if (!this.searchParams.kpyf) {
        this.$message.error('请选择开票月份')
        return
      }
      this.getList();
    },
    onResize() {
      // this.$refs.SelectTreeCom.clearableFn();
      this.searchParams = {
        sxjg: '',
        fpzt: '',
        fplx: '',
        kpyf: ''
      }
      this.searchParams.sxjg=this.$store.state.user.baseInfo.deptCode

    },
    handleSizeChange(val) {
      this.pages.current = 1;
      this.pages.size = val;
      this.getList()
    },
    handleCurrentChange(val) {
      this.pages.current = val
      this.getList()
    },
    async getList() {
      this.loading = true
      // sxjg 转成数组
      console.log(this.searchParams.sxjg)
      let param = {
        pageNo: this.pages.current,
        pageSize: this.pages.size,
        ...this.searchParams,
      }
      // const {code, msg, data} = await getInvoiceInformationStatistics(param);
      // await getInvoiceInformationStatistics(param);
      const {code, msg, data} = await getInvoiceInformationStatistics(param);
      if (code == 200) {
        this.listDetails = data.records
        this.pages.total = data.total
        this.pages.current = data.current
      }
      this.loading = false
    }
  },
  computed: {
    DictCode() {
      return DictCode
    }
  },
  mixins: [mixinTable],
  data() {
    return {
      depStatus: false,
      searchParams: {
        sxjg: '',
        fpzt: '',
        fplx: '',
        kpyf: ''
      },
      loading: false,
      keySet: [
        {
          label: '所辖机构',
          englishName: 'sxjg',
          width: 200,
          sortable: true,
        },
        {
          label: '发票状态',
          englishName: 'fpzt',
          width: 200,
          sortable: true,
        },
        {
          label: '发票类型',
          englishName: 'fplx',
          width: 200,
        },
        {
          label: '开票月份',
          englishName: 'kpyf',
          width: 200,
          sortable: true,
        },
        {
          label: '金额(不含税)',
          englishName: 'bhsje',
          width: 200,
          isSlot: true,
          slotName: 'bhsje',
          sortable: true,
        },
        {
          label: '税率',
          englishName: 'sl',
          width: 200,
          sortable: true,
        },
        {
          label: '税额',
          englishName: 'se',
          width: 200,
          isSlot: true,
          slotName: 'se',
          sortable: true,
        },
        {
          label: '金额(含税)',
          englishName: 'hsje',
          width: 200,
          isSlot: true,
          slotName: 'hsje',
          sortable: true,
        }
      ],
      listDetails: []
    }
  }
}
</script>

<style scoped lang="scss">
</style>
